@import "./variable.less";

.text-align(@position: left) {
  text-align: @position;
}

.font-size(@size: 16px) {
  font-size: @size;
}

.padd-10 {
  padding: 10px;
}

.padd-0-10 {
  padding: 0 10px;
}

.padd-20 {
  padding: 20px;
}

.padd-0-20 {
  padding: 0 20px;
}

.m {
  &b {
    &-0 {
      margin-bottom: 0 !important;
    }

    &-5 {
      margin-bottom: 5px;
    }

    &-8 {
      margin-bottom: 8px;
    }

    &-10 {
      margin-bottom: 10px;
    }

    &-15 {
      margin-bottom: 15px;
    }

    &-16 {
      margin-bottom: 16px;
    }

    &-20 {
      margin-bottom: 20px;
    }
  }

  &r {
    &-0 {
      margin-right: 0 !important;
    }

    &-5 {
      margin-right: 5px;
    }

    &-8 {
      margin-right: 8px;
    }

    &-10 {
      margin-right: 10px;
    }

    &-16 {
      margin-right: 16px;
    }

    &-20 {
      margin-right: 20px;
    }
  }

  &l {
    &-0 {
      margin-left: 0 !important;
    }

    &-5 {
      margin-left: 5px;
    }

    &-8 {
      margin-left: 8px;
    }

    &-10 {
      margin-left: 10px;
    }

    &-16 {
      margin-left: 16px;
    }

    &-20 {
      margin-left: 20px;
    }
  }

  &t {
    &-0 {
      margin-top: 0 !important;
    }

    &-5 {
      margin-top: 5px;
    }

    &-8 {
      margin-top: 8px;
    }

    &-10 {
      margin-top: 10px;
    }

    &-16 {
      margin-top: 16px;
    }

    &-20 {
      margin-top: 20px;
    }
  }
}

.link {
  color: #1660fc;
}
.t-link {
  color: #1660fc;
  text-decoration: underline;
}

.t {
  &-100 {
    line-height: 1;
  }

  &-150 {
    line-height: 1.5;
  }

  &-200 {
    line-height: 2;
  }

  &-center {
    .text-align(center);
  }

  &-left {
    .text-align(left);
  }

  &-right {
    .text-align(right);
  }

  &-orange {
    color: @orange;
  }

  &-blue {
    color: @blue;
  }

  &-green {
    color: #7d2;
  }

  &-red {
    color: @red;
  }

  &-black {
    color: #333;
  }

  &-12 {
    font-size: 12px;
  }

  &-14 {
    font-size: 14px;
  }

  &-15 {
    font-size: 15px;
  }

  &-16 {
    font-size: 16px;
  }

  &-18 {
    font-size: 18px;
  }

  &-20 {
    font-size: 20px;
  }

  &-24 {
    font-size: 24px;
  }

  &-ell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &-ell-2 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal !important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  &-xs {
    .font-size(12px);
  }

  &-sm {
    .font-size(14px);
  }

  &-md {
    .font-size(16px);
  }

  &-lg {
    .font-size(24px);
  }

  &-bold {
    font-weight: bold;
  }

  &-gray {
    color: #999;
  }

  &-vm {
    vertical-align: middle;
  }
}

.bg {
  background-color: transparent;

  &-white {
    background-color: #fff;
  }
}

.border(@position: bottom) {
  background-image: linear-gradient(
    180deg,
    #d9d9d9,
    #d9d9d9 50%,
    transparent 50%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: @position left;
}

.btn-link {
  color: #08f;
  background: none;
  border: 0;
  font-size: 0.6rem;
}

.img-r {
  width: 100%;
  height: auto;
  display: inline-block;

  img {
    width: 100%;
    height: auto;
    display: block;
  }

  // box-sizing: border-box;
}

.v-top {
  display: inline-block;
  vertical-align: top;
}

.v-center {
  display: inline-block;
  vertical-align: middle;
}

.border-top {
  .border(top);
}

.border-bottom {
  .border(bottom);
}

.p {
  &f {
    position: fixed;
    z-index: 9;

    &-b {
      bottom: 0;
      left: 0;
      right: 0;
      top: auto;
    }
  }

  &-10 {
    padding: 10px;
  }

  &-10-0 {
    padding: 10px 0;
  }

  &-0-10 {
    padding: 0 10px;
  }

  &r {
    &-10 {
      padding-right: 10px;
    }
  }

  &l {
    &-10 {
      padding-left: 10px;
    }
  }

  &t {
    &-10 {
      padding-top: 10px;
    }
  }

  &b {
    &-10 {
      padding-bottom: 10px;
    }
  }
}

.clearfix {
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.lh-1 {
  line-height: 1;
}

.lh-2 {
  line-height: 2;
}

.lh-3 {
  line-height: 3;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.block-center {
  margin-left: auto;
  margin-right: auto;
}

.scroll-x {
  white-space: nowrap;
  // overflow-y: hidden;
  overflow-x: auto;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }
}

.scroll-y {
  overflow-y: auto;
  scroll-behavior: smooth;
  // width: 100%;
}

.scroll-item {
  display: inline-block;
  // margin: 0 2px;
}
